<template>
  <div id="hy-swiper">
    <div
      class="swiper"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <slot></slot>
    </div>
    <div class="point">
      <div
        v-for="(item, index) in slideCount"
        :key="index"
        class="pointItem"
        :class="{
          active: index === currentIndex - 1,
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "swiper",
  props: {
    interval: {
      typeof: Number,
      default: 3000,
    },
    velocity: {
      typeof: Number,
      default: 300,
    },
    extentWidth: {
      typeof: Number,
      default: 0.25,
    },
    showspot: {
      typeof: Boolean,
      default: true,
    },
  },
  data() {
    return {
      totalwidth: 0,
      slideCount: 0,
      scrolling: false,
      currentIndex: 1,
      swiperStyle: {},
    };
  },
  mounted: function () {
    setTimeout(() => {
      this.heDom();
      this.startTime();
    }, 600);
  },
  methods: {
    startTime() {
      this.playTime = window.setInterval(() => {
        this.currentIndex++;
        this.scrollControl(-this.currentIndex * this.totalwidth);
      }, this.interval);
    },
    stopTime() {
      window.clearInterval(this.playTime);
    },
    scrollControl(distancePoi) {
      this.scrolling = true;
      this.swiperStyle.transition = "transform " + this.velocity + "ms";
      this.scrollCart(distancePoi);
      this.checkPosition();
      this.scrolling = false;
    },
    scrollCart(pos) {
      this.swiperStyle.transform = `translate3d(${pos}px,0,0)`;
      this.swiperStyle["-webkit-transform"] = `translate3d(${pos}px,0,0)`;
      this.swiperStyle["-ms-transform"] = `translate3d(${pos}px,0,0)`;
    },
    checkPosition() {
      window.setTimeout(() => {
        this.swiperStyle.transition = "0ms";
        if (this.currentIndex >= this.slideCount + 1) {
          this.currentIndex = 1;
          this.scrollCart(-this.currentIndex * this.totalwidth);
        } else if (this.currentIndex <= 0) {
          this.currentIndex = this.slideCount;
          this.scrollCart(-this.currentIndex * this.totalwidth);
        }
        // this.$emit("transitionEnd", this.currentIndex - 1);
      }, this.velocity);
    },
    heDom() {
      let swiperel = document.querySelector(".swiper");
      let slideel = swiperel.getElementsByClassName("slide");
      this.slideCount = slideel.length;
      if (this.slideCount > 1) {
        let slideFirst = slideel[0].cloneNode(true);
        let slidelast = slideel[this.slideCount - 1].cloneNode(true);
        swiperel.insertBefore(slidelast, slideel[0]);
        swiperel.appendChild(slideFirst);
        this.totalwidth = swiperel.offsetWidth;
        this.swiperStyle = swiperel.style;
      }
      this.scrollCart(-this.totalwidth);
    },
    touchStart: function (e) {
      if (this.scrolling) return;
      this.stopTime();
      this.startX = e.touches[0].pageX;
    },
    touchMove: function (e) {
      this.current = e.touches[0].pageX;
      this.distance = this.current - this.startX;
      let currposition = -this.currentIndex * this.totalwidth;
      let disposition = this.distance + currposition;
      this.scrollCart(disposition);
    },
    touchEnd: function (e) {
      let currentMove = Math.abs(this.distance);
      if (this.distance === 0) return;
      else if (
        this.distance > 0 &&
        currentMove > this.totalwidth * this.extentWidth
      ) {
        this.currentIndex--;
      } else if (
        this.distance < 0 &&
        currentMove > this.totalwidth * this.extentWidth
      ) {
        this.currentIndex++;
      }
      this.scrollControl(-this.currentIndex * this.totalwidth);
      this.startTime();
    },
  },
};
</script>

<style scoped>
#hy-swiper {
  overflow: hidden;
  position: relative;
  /* margin-top: 44px; */
}
.swiper {
  display: flex;
}
.point {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.pointItem {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #fff;
  line-height: 8px;
  text-align: center;
  font-size: 12px;
  margin: 0 5px;
}
.active {
  background-color: #ff5777;
}
.active1 {
  background-color: #ff5777;
}
</style>